<template>
  <div class="yq-special">
    <yq-header></yq-header>
    <div class="yq-special-container">

      <div :class="[specialItemClass]"
           v-for="special in specials"
           :key="special.title"
           @click="toWeb(special.slug)">

        <!-- 图片要使用 2000 * 190 尺寸 -->
        <div class="yq-special-item-cover">
          <img :src="special.cover"  alt="">
        </div>

        <div class="yq-special-item-title">
          {{ special.title.replaceAll('【专题】','') }}
        </div>
        <div class="yq-special-item-sub-title">
          创建于: {{ special.createdAt }} | 修改于: {{ special.updatedAt }}
        </div>
        <div class="yq-special-item-sub-title">
          总字数: {{ special.wordCount }}
        </div>
        <div class="yq-special-item-content">
          {{ special.description }}
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import YqHeader from "@/views/yuque/YqHeader";
import {yqSpecial} from '@/api/apis/yuque';
import obConstants from '@/assets/js/obConstants';

export default {
  name: "yqSpecial",
  data () {
    return {
      specials: [],
      screenWidth: document.body.clientWidth,
      specialItemClass: 'yq-special-item yq-special-item-web'
    }
  },
  watch: {
    screenWidth (width) {
      this.changeScreenWidth(width);
    },
  },
  methods: {
    changeScreenWidth(width) {
      if (width > 900) {
        this.specialItemClass = 'yq-special-item yq-special-item-web'
      } else {
        this.specialItemClass = 'yq-special-item yq-special-item-mobile'
      }
    },
    getYqSpecial() {
      yqSpecial().then(resp => {
        this.specials = resp.data;
      })
    },
    toWeb(slug) {
      window.open(obConstants.USER.YUQUE_HOME + "/" + slug);
    }
  },
  mounted() {
    this.getYqSpecial();
  },
  created() {
    console.log('special')
    const that = this;
    window.addEventListener('resize',() => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        that.screenWidth = window.screenWidth
      })()
    });
    this.changeScreenWidth(this.screenWidth);
  },
  components: {
    'yq-header': YqHeader
  }
}
</script>

<style scoped lang="scss">
.yq-special {
  @include box(100%, 100%);
  @include flex(column, flex-start, center);
  background-image: linear-gradient(to bottom right, #ffffff, #9099a4);

  &-container {
    @include box(100%, 100%);
    @include flex(row, flex-start, flex-start);
    font-family: ubuntumono, serif;
    flex-wrap: wrap;
    margin-top: 20px;
    overflow-y: scroll;
    //padding: 0 15px;

    .yq-special-item {
      @include flex(column, flex-start, flex-start);
      @include border(1px, #9099a4, 10px);
      margin: 20px 30px;
      padding: 20px;
      text-align: left;
      transition: box-shadow 0.3s;
      cursor: pointer;

      &:hover {
        box-shadow: 0 0 10px #505050;
      }

      &-cover {
        //@include box(100%);
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        img {
          width: 100%;
          border-radius: 5px;
          box-shadow: 0 0 10px #505050;
        }
      }

      &-title {
        @include font(25px, null, null, current);
        line-height: 25px;
        margin-top: 10px;
        margin-bottom: 5px;
      }

      &-sub-title {
        @include font(12px, #9a9a9a);
        padding-left: 5px;
      }

      &-content {
        @include font(14px, #494949, null, ubuntumono);
        margin-top: 10px;
      }
    }

    .yq-special-item-web {
      @include box(calc(50% - 60px), 300px);
    }
    .yq-special-item-mobile {
      @include box(calc(100% - 60px), 300px);
    }
  }
}
</style>